<template>
  <gui-page :customHeader="true" class="gui-bg-white">
    <template v-slot:gHeader>
      <view
        v-show="isFixed"
        :style="{ opacity: isFixed ? 1 : 0 }"
        style="height: 88rpx"
        class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-border-b gui-bg-white"
      >
        <!-- 使用组件实现返回按钮及返回首页按钮 -->

        <!-- 导航文本此处也可以是其他自定义内容 -->
        <view
          class="gui-flex1 align-items-center gui-justify-content-center gui-nowrap gui-flex gug-row"
          style="margin-left: 20rpx"
        >
          <image
            lazy-load
            @tap="goCard(author.authorId)"
            style="width: 70rpx; height: 70rpx; border-radius: 70rpx"
            :src="author.avatarUrl"
            class="gui-slide-list-img xhs-margin-right-20 animate slideInUp"
            mode="aspectFill"
          ></image>
        </view>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->

        <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
      </view>
    </template>

    <template v-slot:gBody>
      <view>
        <view
          v-if="backgroundUrl.length > 0"
          :style="{
            'background-image': `url(${formatImgUrl(author.backGroundUrl)})`,
            'background-size': 'cover',
            'background-position': 'center',
            'background-repeat': 'no-repeat',
          }"
        >
          <view class="bg-element">
            <view class="gui-list gui-padding">
              <view class="gui-list-items">
                <view
                  @tap="updateAvatar"
                  style="width: 150rpx; height: 150rpx"
                  class="gui-list-image ucenter-face"
                >
                  <image
                    lazy-load
                    style="
                      width: 150rpx;
                      height: 150rpx;
                      border: 1rpx solid #ffffff;
                    "
                    class="gui-list-image ucenter-face-image"
                    :src="author.avatarUrl"
                    mode="aspectFill"
                  ></image>
                </view>
                <view class="gui-list-body">
                  <view class="gui-list-title">
                    <text
                      style="font-weight: bold; font-size: 35rpx"
                      class="gui-list-title-text gui-color-white"
                    >
                      {{ author.authorName }}
                    </text>
                  </view>
                  <text
                    class="gui-list-body-desc gui-color-white xhs-margin-top-10 xhs-font20"
                    >摇爪号:&nbsp;&nbsp;{{ author.authorNo }} &nbsp;<text
                      class="gui-icons"
                      >&#xe631;</text
                    ></text
                  >
                  <text
                    class="gui-list-body-desc gui-color-white xhs-margin-top-10 xhs-font20"
                    >账号:&nbsp;&nbsp;{{ author.phoneNumber }} &nbsp;<text
                      class="gui-icons"
                      >&#xe631;</text
                    ></text
                  >
                  <text
                    class="gui-list-body-desc gui-color-white xhs-margin-top-5 xhs-font20"
                    >IP属地:&nbsp;&nbsp;{{ author.ipRealAddress }} &nbsp;<text
                      class="gui-icons"
                      >&#xe6a1;</text
                    ></text
                  >
                </view>
              </view>
              <view class="gui-color-white gui-margin-top">
                {{ author.description }}
              </view>
              <view class="gui-color-white gui-margin-top gui-flex xhs-font20">
                <text class="author-tag gui xhs-maoboli">
                  <text
                    v-show="author.sex == '1'"
                    style="color: #90bae0"
                    class="gui-icons"
                    >&#xe618;</text
                  >
                  <text
                    v-show="author.sex == '2'"
                    style="color: #ec8c9f"
                    class="gui-icons"
                    >&#xe619;</text
                  >
                  {{ author.age }}岁
                </text>

                <text class="author-tag xhs-maoboli xhs-font20">
                  {{ author.ipRealAddress }}
                </text>
              </view>

              <view class="gui-flex gui-space-between">
                <view
                  class="gui-flex gui-color-white gui-margin-top xhs-font30"
                >
                  <view
                    @tap.stop="goFollow(author, 1)"
                    style="width: 100rpx; text-align: center"
                  >
                    <view>{{ author.follow }}</view>
                    <view class="xhs-font24 xhs-margin-top-10">关注</view>
                  </view>
                  <view
                    @tap.stop="goFollow(author, 2)"
                    style="width: 100rpx; text-align: center"
                  >
                    <view>{{ author.fans }}</view>
                    <view class="xhs-font24 xhs-margin-top-10">粉丝</view>
                  </view>
                  <view style="width: 160rpx; text-align: center">
                    <view>{{ author.upAndStarCount }}</view>
                    <view class="xhs-font24 xhs-margin-top-10">获赞与收藏</view>
                  </view>
                </view>

                <view
                  class="gui-flex gui-align-items-center gui-justify-content-center"
                >
                  <button
                    @tap="goInfo"
                    type="default"
                    class="gui-button-mini xhs-border-radius50 xhs-border-white"
                    style="
                      width: 150rpx;
                      margin-right: 20rpx;
                      background: transparent;
                      backdrop-filter: blur(10px);
                      background-color: rgba(255, 255, 255, 0.1);
                    "
                  >
                    <text class="gui-color-white gui-icons">编辑资料</text>
                  </button>

                  <button
                    @tap="showMenu"
                    class="gui-button-mini xhs-border-radius50 xhs-border-white"
                    style="
                      width: 82rpx;
                      background: transparent;
                      backdrop-filter: blur(10px);
                      background-color: rgba(255, 255, 255, 0.1);
                    "
                  >
                    <text class="gui-color-white gui-icons">&#xe613;</text>
                  </button>

                  <view>
                    <gui-popup-menu
                      @hideMenu="hideMenu"
                      ref="gracePopupMenu"
                      background="transparent"
                    >
                      <view
                        class="gui-bg-white gui-dark-bg-level-3 xhs-font28"
                        style="border-radius: 8rpx; padding: 20rpx"
                      >
                        <view
                          class="menus gui-block gui-primary-text"
                          @tap.stop="tap"
                          data-id="1"
                          >个人资料</view
                        >

                        <view
                          style="margin-top: 30rpx"
                          class="menus gui-block gui-primary-text"
                          @tap.stop="tap"
                          data-id="3"
                          >修改背景图</view
                        >

                        <view
                          style="margin-top: 30rpx"
                          class="menus gui-block gui-primary-text"
                          @tap.stop="tap"
                          data-id="4"
                          >联系客服</view
                        >

                        <view
                          style="margin-top: 50rpx"
                          class="menus gui-block gui-primary-text"
                          @tap.stop="tap"
                          data-id="2"
                          >退出登录</view
                        >
                      </view>
                    </gui-popup-menu>
                  </view>
                </view>
              </view>

              <!-- #ifdef H5 -->

              <view class="gui-margin-top">
                <gui-xhs-switch-navigation2
                  fontSize="26rpx"
                  fontSizeSmall="20rpx"
                  customClass="gui-color-white"
                  :size="160"
                  :items="navItems"
                  @change="navchange"
                ></gui-xhs-switch-navigation2>
              </view>
              <!-- #endif -->

              <view style="height: 10rpx"></view>
            </view>
          </view>
        </view>

        <!-- 模拟一个内容区域 假的吸顶容器默认不在最顶部 -->

        <!-- 动态产生一个 view 当导航吸顶时展示占位 高度等于 导航的高度  -->
        <view style="height: 55rpx" v-if="isFixed"></view>

        <gui-switch-navigation-mine
          lineHeight="60rpx"
          style="width: 100%"
          id="header"
          :class="[isFixed ? 'gui-fixed-top' : '', 'gui-bg-white']"
          :activeLineClass="['gui-xhs-red']"
          :items="tabs"
          :size="150"
          activeDirection="center"
          textAlign="center"
          :currentIndex="currentIndex"
          @change="navchange1"
        >
        </gui-switch-navigation-mine>

        <view class="gui-margin-top">
          <!-- 局部选项卡 使用 切换导航 + swiper 实现 -->
          <swiper
            :style="{ height: swiperHeight + 'px' }"
            :current="currentIndex"
            @change="swiperChange"
            @transition="swiperTransition"
          >
            <swiper-item>
              <view id="content-wrap1" style="padding: 0 15rpx">
                <gui-empty
                  v-show="noteList1[0].length == 0"
                  style="height: 500rpx"
                >
                  <template v-slot:img>
                    <view class="gui-flex gui-rows gui-justify-content-center">
                      <text
                        class="gui-icons gui-empty-icon gui-color-gray"
                        style="font-size: 80rpx"
                        >&#xe624;
                      </text>
                    </view>
                  </template>
                  <template v-slot:text>
                    <text
                      class="gui-block gui-text-center xhs-margin-top-30 gui-color-gray"
                      >你还没有发布笔记哦~</text
                    >
                  </template>
                </gui-empty>

                <view class="gui-flex gui-row gui-space-between">
                  <view
                    class="gui-waterfall-item"
                    v-for="(lists, index1) in noteList1"
                    :key="index1"
                  >
                    <view
                      @tap="goDetail(notes)"
                      class="gui-waterfall-items gui-bg-white gui-border-radius"
                      style="overflow: hidden; padding-bottom: 8rpx"
                      v-for="(notes, index2) in lists"
                      :key="index2"
                    >
                      <gui-image
                        @imgLoad="imgLoad"
                        :src="notes.firstPicture"
                        :width="355"
                      ></gui-image>
                      <view
                        class="gui-text gui-primary-text xhs-margin-top-15"
                        style="color: #333333; margin-left: 16rpx"
                        ><text>{{ notes.noteTitle }}</text></view
                      >
                      <view
                        class="gui-flex gui-row gui-space-between xhs-margin-top-15"
                      >
                        <view>
                          <image
                            style="
                              width: 28px;
                              height: 28px;
                              margin-left: 16rpx;
                            "
                            class="gui-list-image ucenter-face-image"
                            :src="notes.authorAvatar"
                            mode="aspectFill"
                          ></image>
                        </view>
                        <!--														负值越小越往左-->
                        <view
                          style="
                            font-size: 24rpx;
                            color: #5a5a5a;
                            line-height: 60rpx;
                            width: 200rpx;
                          "
                        >
                          <text>{{ notes.authorName }}</text>

                          <!--															<br/>-->
                          <!--															<text style="color:#ACACAC;">{{notes.createTimeStr}}</text>-->
                        </view>

                        <view
                          style="
                            margin-right: 16rpx;
                            color: #acacac;
                            line-height: 42rpx;
                            font-size: 28rpx;
                            text-align: center;
                          "
                          @tap.stop="upNote(notes)"
                        >
                          <text
                            :class="[
                              'gui-icons',
                              'gui-block',
                              'ranking-lists-zan-icon',
                              notes.isUp ? 'zan-active' : '',
                            ]"
                            >{{ notes.isUp ? "&#xe605;" : "&#xe6ad;"
                            }}<text style="color: #5a5a5a; margin-left: 5rpx">
                              {{ notes.upCount }}</text
                            ></text
                          >
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </swiper-item>
            <swiper-item class="tab-card-item">
              <gui-empty
                v-show="noteList2[0].length == 0"
                style="height: 500rpx"
              >
                <template v-slot:img>
                  <view class="gui-flex gui-rows gui-justify-content-center">
                    <text
                      class="gui-icons gui-empty-icon gui-color-gray"
                      style="font-size: 80rpx"
                      >&#xe624;
                    </text>
                  </view>
                </template>
                <template v-slot:text>
                  <text
                    class="gui-block gui-text-center xhs-margin-top-30 gui-color-gray"
                    >你还没有收藏笔记哦~</text
                  >
                </template>
              </gui-empty>

              <view id="content-wrap2" style="padding: 0 15rpx">
                <view class="gui-flex gui-row gui-space-between">
                  <view
                    class="gui-waterfall-item"
                    v-for="(lists, index1) in noteList2"
                    :key="index1"
                  >
                    <view
                      @tap="goDetail(notes)"
                      class="gui-waterfall-items gui-bg-white gui-border-radius"
                      style="overflow: hidden; padding-bottom: 8rpx"
                      v-for="(notes, index2) in lists"
                      :key="index2"
                    >
                      <gui-image
                        @imgLoad="imgLoad"
                        :src="notes.firstPicture"
                        :width="355"
                      ></gui-image>
                      <view
                        class="gui-text gui-primary-text xhs-margin-top-15 xhs-font30"
                        style="color: #333333; margin-left: 16rpx"
                        ><text>{{ notes.noteTitle }}</text></view
                      >
                      <view
                        class="gui-flex gui-row gui-space-between xhs-margin-top-15"
                      >
                        <view>
                          <image
                            style="
                              width: 28px;
                              height: 28px;
                              margin-left: 16rpx;
                            "
                            class="gui-list-image ucenter-face-image"
                            :src="notes.authorAvatar"
                            mode="aspectFill"
                          ></image>
                        </view>
                        <!--														负值越小越往左-->
                        <view
                          style="
                            font-size: 24rpx;
                            color: #5a5a5a;
                            line-height: 60rpx;
                            width: 200rpx;
                          "
                        >
                          <text>{{ notes.authorName }}</text>
                          <!--															<br/>-->
                          <!--															<text style="color:#ACACAC;">{{notes.createTimeStr}}</text>-->
                        </view>

                        <view
                          style="
                            margin-right: 16rpx;
                            color: #acacac;
                            line-height: 42rpx;
                            font-size: 28rpx;
                            text-align: center;
                          "
                          @tap.stop="upNote(notes)"
                        >
                          <text
                            :class="[
                              'gui-icons',
                              'gui-block',
                              'ranking-lists-zan-icon',
                              notes.isUp ? 'zan-active' : '',
                            ]"
                            >{{ notes.isUp ? "&#xe605;" : "&#xe6ad;"
                            }}<text style="color: #5a5a5a; margin-left: 5rpx">
                              {{ notes.upCount }}</text
                            ></text
                          >
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </swiper-item>
            <swiper-item class="tab-card-item">
              <view id="content-wrap3" style="padding: 0 15rpx">
                <gui-empty
                  v-show="noteList3[0].length == 0"
                  style="height: 500rpx"
                >
                  <template v-slot:img>
                    <view class="gui-flex gui-rows gui-justify-content-center">
                      <text
                        class="gui-icons gui-empty-icon gui-color-gray"
                        style="font-size: 80rpx"
                        >&#xe624;
                      </text>
                    </view>
                  </template>
                  <template v-slot:text>
                    <text
                      class="gui-block gui-text-center xhs-margin-top-30 gui-color-gray"
                      >你还没有点赞笔记哦~</text
                    >
                  </template>
                </gui-empty>

                <view class="gui-flex gui-row gui-space-between">
                  <view
                    class="gui-waterfall-item"
                    v-for="(lists, index1) in noteList3"
                    :key="index1"
                  >
                    <view
                      @tap="goDetail(notes)"
                      class="gui-waterfall-items gui-bg-white gui-border-radius"
                      style="overflow: hidden; padding-bottom: 8rpx"
                      v-for="(notes, index2) in lists"
                      :key="index2"
                    >
                      <gui-image
                        @imgLoad="imgLoad"
                        :src="notes.firstPicture"
                        :width="355"
                      ></gui-image>
                      <view
                        class="gui-text gui-primary-text xhs-margin-top-15 xhs-font30"
                        style="color: #333333; margin-left: 16rpx"
                        ><text>{{ notes.noteTitle }}</text></view
                      >
                      <view
                        class="gui-flex gui-row gui-space-between xhs-margin-top-15"
                      >
                        <view>
                          <image
                            style="
                              width: 28px;
                              height: 28px;
                              margin-left: 16rpx;
                            "
                            class="gui-list-image ucenter-face-image"
                            :src="notes.authorAvatar"
                            mode="aspectFill"
                          ></image>
                        </view>
                        <!--														负值越小越往左-->
                        <view
                          style="
                            font-size: 24rpx;
                            color: #5a5a5a;
                            line-height: 60rpx;
                            width: 200rpx;
                          "
                        >
                          <text>{{ notes.authorName }}</text>
                          <!--															<br/>-->
                          <!--															<text style="color:#ACACAC;">{{notes.createTimeStr}}</text>-->
                        </view>

                        <view
                          style="
                            margin-right: 16rpx;
                            color: #acacac;
                            line-height: 42rpx;
                            font-size: 28rpx;
                            text-align: center;
                          "
                          @tap.stop="upNote(notes)"
                        >
                          <text
                            :class="[
                              'gui-icons',
                              'gui-block',
                              'ranking-lists-zan-icon',
                              notes.isUp ? 'zan-active' : '',
                            ]"
                            >{{ notes.isUp ? "&#xe605;" : "&#xe6ad;"
                            }}<text style="color: #5a5a5a; margin-left: 5rpx">
                              {{ notes.upCount }}</text
                            ></text
                          >
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </swiper-item>
          </swiper>
        </view>

        <!-- 加载组件 -->
        <gui-loadmore
          v-show="currentIndex == 0 && noteList1[0].length != 0"
          ref="loadmorecom1"
          :status="1"
        ></gui-loadmore>

        <gui-loadmore
          v-show="currentIndex == 1 && noteList2[0].length != 0"
          ref="loadmorecom2"
          :status="1"
        ></gui-loadmore>

        <gui-loadmore
          v-show="currentIndex == 2 && noteList3[0].length != 0"
          ref="loadmorecom3"
          :status="1"
        ></gui-loadmore>
      </view>
    </template>
  </gui-page>
</template>
<script>
import getWebSocketClient from "@/Grace6/js/ws";
import commonMixin from "@/mixin/commonMinxin";

export default {
  mixins: [commonMixin],
  data() {
    return {
      defaultSwiperHeight: 0,
      loaded: false,
      author: {
        avatarUrl: "",
        backGroundUrl: '"http://8.146.211.120:8080/upload/notes/note (6).jpg"',
      },
      backgroundUrl: '"http://8.146.211.120:8080/upload/notes/note (6).jpg"',
      isFixed: false,
      navItems: [
        { title: "购物", desc: "好逛好玩又好买" },
        { title: "订单", desc: "查看我的订单" },
        { title: "购物车", desc: "99个商品" },
        { title: "创作灵感", desc: "学创作找灵感" },
        { title: "浏览记录", desc: "我看过的笔记" },
      ],
      // 选项卡标签
      tabs: [
        { id: 0, name: "笔记" },
        { id: 1, name: "收藏" },
        { id: 2, name: "赞过" },
      ],
      // 选中选项的 索引
      currentIndex: 0,
      noteList1: [[], []],
      noteList2: [[], []],
      noteList3: [[], []],
      // 用于记录是否有 api 请求正在执行
      apiLoadingStatus1: false,
      apiLoadingStatus2: false,
      apiLoadingStatus3: false,
      page1: 1,
      page2: 1,
      page3: 1,
      swiperHeight: 500,
      headerHeight: 0,
      pageHeight: "",
      loadMoreTimer1: null,
      loadMoreTimer2: null,
      loadMoreTimer3: null,
    };
  },

  watch: {
    currentIndex(newVal, OldVal) {
      this.$nextTick(() => {
        this.setSwiperHeight(this.currentIndex + 1);
      });
    },
  },
  onHide() {
    this.isFixed = false;
  },
  onShow() {
    console.log("onShow");
    //证明不是第一次进页面了 刷新当前页
    if (this.loaded) {
      // this.$nextTick(() => {
      // 	this['page'+(this.currentIndex+1)] = 1;
      // 	this['noteList'+(this.currentIndex+1)] = [[],[]]
      // 	this['getNotes'+(this.currentIndex+1)](true);
      // })

      this.getMine();
    }
  },
  onLoad: function () {
    uni.app.checkLogin();
    console.log(uni.app.getStorage("user"));
    this.$nextTick(() => {
      this.getMine();
      const systemInfo = uni.getSystemInfoSync();
      this.pageHeight = systemInfo.windowHeight;
      console.log("当前页面高度：", this.pageHeight);
      // 创建查询对象
      setTimeout(() => {
        const query = uni.createSelectorQuery().in(this);
        // 选择元素并获取位置信息
        query
          .select("#header")
          .boundingClientRect((data) => {
            if (data) {
              console.log(data);
              // data.top就是元素的上边界距离页面顶部的距离
              const distanceToTop = data.top;
              console.log("距离顶部的高度:", distanceToTop);
              if (this.headerHeight == 0) {
                this.headerHeight = data.top;
                console.log(this.headerHeight);
              }
              this.getNotes1();
              this.getNotes2();
              this.getNotes3();
              this.loaded = true;
              // this.swiperHeight = this['swiperHeight'+(this.currentIndex+1)]
              // console.log('赋值了高度 当前currentIndex+1='+ (this.currentIndex+1) +' onLoad监听的数据' + this.swiperHeight)

              //此时 swiper的高度等于 页面高度 减去头部高度
              this.swiperHeight = this.pageHeight - this.headerHeight;
              this.defaultSwiperHeight = this.pageHeight - this.headerHeight;
            }
          })
          .exec();
      }, 200);
    });
  },
  onPageScroll: function (e) {
    console.log(e);
    // 根据滚动高度动态吸顶
    if (e.scrollTop >= this.headerHeight) {
      this.isFixed = true;
    } else {
      this.isFixed = false;
    }
  },
  onPullDownRefresh: function () {
    console.log("下拉刷新了");
    if (this["apiLoadingStatus" + (this.currentIndex + 1)]) {
      uni.stopPullDownRefresh();
      return;
    }
    this["page" + (this.currentIndex + 1)] = 1;
    this["noteList" + (this.currentIndex + 1)] = [[], []];
    this["getNotes" + (this.currentIndex + 1)](true);
  },
  onReachBottom: function () {
    console.log("我到第" + (this.currentIndex + 1) + "最低端了");
    console.log(this["apiLoadingStatus" + (this.currentIndex + 1)]);
    if (this["apiLoadingStatus" + (this.currentIndex + 1)]) {
      return;
    }
    // 获取加载组件状态看一下是否还能继续加载
    // 保证触底只执行一次加载
    console.log("timer");
    console.log(this["loadMoreTimer" + (this.currentIndex + 1)]);
    if (this["loadMoreTimer" + (this.currentIndex + 1)] != null) {
      clearTimeout(this["loadMoreTimer" + (this.currentIndex + 1)]);
    }
    this["loadMoreTimer" + (this.currentIndex + 1)] = setTimeout(() => {
      var status =
        this.$refs["loadmorecom" + (this.currentIndex + 1)].loadMoreStatus;
      if (status != 0) {
        return null;
      }
      this.$refs["loadmorecom" + (this.currentIndex + 1)].loading();
      // 此处开启加载动画执行加载数据的函数
      this["getNotes" + (this.currentIndex + 1)]();
      // this.swiperHeight = this['swiperHeight'+(this.currentIndex+1)]
      // console.log('赋值了高度 当前currentIndex+1='+ (this.currentIndex+1) +' oonReachBottom监听的数据' + this.swiperHeight)
      this.getMine();
    }, 80);
  },
  methods: {
    formatImgUrl(imgUrl) {
      return '"' + imgUrl + '"';
    },
    goFollow(e, type) {
      uni.navigateTo({
        url: "/pages/users/users?authorId=" + e.authorId + "&type=" + type,
      });
    },
    goDetail(e) {
      uni.navigateTo({
        url: "/pages/notes/detail/detail?noteId=" + e.noteId,
      });
    },
    upNote(notes) {
      uni.app.post("/auth/upNote", notes, "json", "", (res) => {
        console.log(res.data);
        if (res.data) {
          notes.isUp = true;
          notes.upCount++;
        } else {
          notes.isUp = false;
          notes.upCount--;
        }
      });
    },
    imgLoad() {
      console.log("图片加载完成了");
      this.$nextTick(() => {
        this.setSwiperHeight(this.currentIndex + 1);
      });
    },
    getMine() {
      let that = this;
      uni.app.get("/auth/getMine", "", "", (res) => {
        console.log(res);
        this.author = res.data;
        this.backGroundUrl = res.data.backGroundUrl;
      });
    },
    showMenu: function () {
      this.$refs.gracePopupMenu.open();
      this.$refs.gracePopupMenu.setTop(10);
      this.$refs.gracePopupMenu.setRight(4);
    },
    hideMenu: function () {
      this.$refs.gracePopupMenu.close();
    },
    updateAvatar() {
      //修改背景图
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          var file = res.tempFiles[0];
          console.log(file.size > 2 * (1024 * 1024));
          if (file.size > 2 * (1024 * 1024)) {
            uni.app.msg("图片尺寸过大，已忽略");
            return;
          }
          console.log(file);
          //拿到数据后上传
          uni.uploadFile({
            url: this.$uploadUrl,
            filePath: file.path,
            name: file.fileName,
            formData: { fileSavePath: "/avatar" },
            success: (uploadRes) => {
              try {
                uploadRes = JSON.parse(uploadRes.data);
                if (uploadRes.status != "ok") {
                  uni.showToast({
                    title: "上传失败 : " + uploadRes.data,
                    icon: "none",
                  });
                } else {
                  //上传图片成功
                  console.log(uploadRes.result.fileId);
                  uni.app.post(
                    "/auth/updateAuthorAvatar",
                    { fileId: uploadRes.result.fileId },
                    "form",
                    "",
                    (res) => {
                      this.author = res.data;
                    },
                  );
                }
              } catch (e) {
                this.error(index);
              }
            },
            fail: (e) => {
              uni.showToast({
                title: "上传失败，请点击图片重试",
                icon: "none",
              });
            },
          });
        },
        complete: function () {},
      });
    },
    goInfo() {
      uni.navigateTo({
        url: "/pages/authorInfo/authorInfo",
      });
    },
    tap: function (e) {
      var id = e.currentTarget.dataset.id;
      // uni.showToast({ title:'您点击了菜单 : ' + id, icon:"none"});
      if (id == 1) {
        uni.navigateTo({
          url: "/pages/authorInfo/authorInfo",
        });
      }

      //联系客服
      if (id == 4) {
        let authtor = {
          authorId: "8",
          authorName: "官方客服",
        };
        uni.app.goChat(authtor);
      }

      if (id == 3) {
        //修改背景图
        uni.chooseImage({
          count: 1,
          sizeType: ["compressed"],
          sourceType: ["album", "camera"],
          success: (res) => {
            var file = res.tempFiles[0];
            if (file.size > 2 * (1024 * 1024)) {
              uni.app.msg("图片尺寸过大，已忽略");
              return;
            }
            console.log(file);
            //拿到数据后上传
            uni.uploadFile({
              url: this.$uploadUrl,
              filePath: file.path,
              name: file.fileName,
              formData: { fileSavePath: "/background" },
              success: (uploadRes) => {
                try {
                  uploadRes = JSON.parse(uploadRes.data);
                  if (uploadRes.status != "ok") {
                    uni.showToast({
                      title: "上传失败 : " + uploadRes.data,
                      icon: "none",
                    });
                  } else {
                    //上传图片成功
                    console.log(uploadRes.result.fileId);
                    uni.app.post(
                      "/auth/updateAuthorBackGround",
                      { fileId: uploadRes.result.fileId },
                      "form",
                      "",
                      (res) => {
                        this.author = res.data;
                      },
                    );
                  }
                } catch (e) {
                  this.error(index);
                }
              },
              fail: (e) => {
                uni.showToast({
                  title: "上传失败，请点击图片重试",
                  icon: "none",
                });
              },
            });
          },
          complete: function () {},
        });
      }

      if (id == 2) {
        //logout
        uni.app.logout();
      }
      this.$refs.gracePopupMenu.close();
    },
    //此方法可以实现一部分 当滑动到 swiper页面很生硬
    // 准备另外一种方法 获取屏幕高度 然后减去header的高度 当页面滑动到header 增加 swiper的高度
    //依然不行 因为guipage有一个向下滑动的动作 滑动后才进行动态数值 会造成页面抖动
    //用第三种 原生 可以
    // swiperScroll(e){
    // 	console.log(e.detail.scrollTop)
    // 	console.log(this.headerHeight)
    // 	if(e.detail.scrollTop>0){
    // 		uni.pageScrollTo({
    // 			scrollTop: this.headerHeight,
    // 			duration: 0
    // 		});
    // 	}
    // },
    //动态设置swiper的高度
    setSwiperHeight(i) {
      var swiperHeightTimer = null;
      if (swiperHeightTimer != null) {
        clearTimeout(swiperHeightTimer);
      }
      swiperHeightTimer = setTimeout(() => {
        let element = "#content-wrap" + i.toString();
        let query = uni.createSelectorQuery().in(this);
        query.select(element).boundingClientRect();
        query.exec((res) => {
          if (res && res[0]) {
            console.log("当前Swiper" + i + "高度" + res[0].height);
            if (
              res[0].height == 0 ||
              res[0].height < this.defaultSwiperHeight
            ) {
              this.swiperHeight = this.defaultSwiperHeight;
              // =(this.pageHeight - this.headerHeight) /2
            } else {
              this.swiperHeight = res[0].height;
            }
            console.log(
              "赋值了高度 当前currentIndex+1=" +
                (this.currentIndex + 1) +
                " getNodes监听的数据" +
                this.swiperHeight,
            );
          }
        });
      }, 20);
    },
    swiperTransition(e) {
      // console.log(e)
    },
    reload: function () {
      console.log(this.currentIndex);
      //根据当前index 确定清空的对象
      this["page" + (this.currentIndex + 1)] = 1;
      this["noteList" + (this.currentIndex + 1)].splice(0, 1, []);
      this["noteList" + (this.currentIndex + 1)].splice(1, 1, []);
      this["getNotes" + (this.currentIndex + 1)](1);
    },
    // 名片切换
    navchange: function (index) {
      console.log(index);
    },
    navchange1: function (index) {
      if (index == 4) {
        uni.app.msg("搜索");
      } else {
        this.currentIndex = index;
        this.setSwiperHeight(this.currentIndex + 1);
      }
    },
    swiperChange: function (e) {
      var index = e.detail.current;
      this.currentIndex = index;
      this.setSwiperHeight(this.currentIndex + 1);
    },
    getNotes1(isReload) {
      uni.app.showLoading("获取中 ...");
      console.log("我开始请求了1");
      this.apiLoadingStatus1 = true;
      const that = this;
      uni.app.get(
        "/auth/getMineNotes",
        { limit: 6, page: this.page1 },
        "",
        (res) => {
          uni.hideLoading();
          if (res.code == 200) {
            console.log("当前页" + that.page1);
            console.log("总页数" + res.data.pages);
            if (that.page1 <= res.data.pages) {
              let notes = res.data.records;

              var lArr = that.noteList1[0];
              var rArr = that.noteList1[1];
              //填充数组[此处的 notes 数据应该来自与api接口数据]
              //数据格式见 "/data/data.js"
              for (var i = 0; i < notes.length; i++) {
                if (i % 2 == 0) {
                  lArr.push(notes[i]);
                } else {
                  rArr.push(notes[i]);
                }
              }
              that.noteList1 = [lArr, rArr];
              this.$nextTick(() => {
                this.setSwiperHeight(1);
              });

              if (that.page1 == res.data.pages) {
                //停止加载更多
                this.$refs.loadmorecom1.nomore();
              } else {
                that.page1++;
                //停止加载更多
                this.$refs.loadmorecom1.stoploadmore();
              }
              that.apiLoadingStatus1 = false;
            } else if (res.data.pages == 0) {
              that.apiLoadingStatus1 = false;
              this.$refs.loadmorecom1.nomore();
            }

            if (isReload) {
              uni.stopPullDownRefresh();
            }
          }
        },
      );
    },
    getNotes2(isReload) {
      uni.app.showLoading("获取中 ...");
      console.log("我开始请求了2");
      this.apiLoadingStatus2 = true;
      const that = this;
      uni.app.get(
        "/auth/getStarNotes",
        { limit: 6, page: this.page2 },
        "",
        (res) => {
          uni.hideLoading();
          if (res.code == 200) {
            console.log("当前页" + that.page2);
            console.log("总页数" + res.data.pages);
            if (that.page2 <= res.data.pages) {
              let notes = res.data.records;

              var lArr = that.noteList2[0];
              var rArr = that.noteList2[1];
              //填充数组[此处的 notes 数据应该来自与api接口数据]
              //数据格式见 "/data/data.js"
              for (var i = 0; i < notes.length; i++) {
                if (i % 2 == 0) {
                  lArr.push(notes[i]);
                } else {
                  rArr.push(notes[i]);
                }
              }
              that.noteList2 = [lArr, rArr];
              this.$nextTick(() => {
                this.setSwiperHeight(2);
              });

              if (that.page2 == res.data.pages) {
                //停止加载更多
                this.$refs.loadmorecom2.nomore();
              } else {
                that.page2++;
                //停止加载更多
                this.$refs.loadmorecom2.stoploadmore();
              }
              that.apiLoadingStatus2 = false;
            } else if (res.data.pages == 0) {
              that.apiLoadingStatus2 = false;
              this.$refs.loadmorecom2.nomore();
            }

            if (isReload) {
              uni.stopPullDownRefresh();
            }
          }
        },
      );
    },
    getNotes3(isReload) {
      uni.app.showLoading("获取中 ...");
      console.log("我开始请求了3");
      this.apiLoadingStatus3 = true;
      const that = this;
      uni.app.get(
        "/auth/getUpNotes",
        { limit: 6, page: this.page3 },
        "",
        (res) => {
          uni.hideLoading();
          if (res.code == 200) {
            console.log("当前页" + that.page3);
            console.log("总页数" + res.data.pages);
            if (that.page3 <= res.data.pages) {
              let notes = res.data.records;

              var lArr = that.noteList3[0];
              var rArr = that.noteList3[1];
              //填充数组[此处的 notes 数据应该来自与api接口数据]
              //数据格式见 "/data/data.js"
              for (var i = 0; i < notes.length; i++) {
                if (i % 2 == 0) {
                  lArr.push(notes[i]);
                } else {
                  rArr.push(notes[i]);
                }
              }
              that.noteList3 = [lArr, rArr];
              this.$nextTick(() => {
                this.setSwiperHeight(3);
              });

              if (that.page3 == res.data.pages) {
                //停止加载更多
                this.$refs.loadmorecom3.nomore();
              } else {
                that.page3++;
                //停止加载更多
                this.$refs.loadmorecom3.stoploadmore();
              }
              that.apiLoadingStatus3 = false;
            } else if (res.data.pages == 0) {
              that.apiLoadingStatus3 = false;
              this.$refs.loadmorecom3.nomore();
            }

            if (isReload) {
              uni.stopPullDownRefresh();
            }
          }
        },
      );
    },
  },
};
</script>
<style scoped>
/*数值越大屏幕中边距越小 左右模块的宽度*/
.gui-waterfall-item {
  width: 355rpx;
}

.gui-waterfall-items {
  margin-bottom: 15rpx;
}

.gui-block {
  margin-top: 10rpx;
}

.ucenter-face {
  width: 100rpx;
  height: 100rpx;
}

.ucenter-face-image {
  width: 100rpx;
  height: 100rpx;
}

.gui-list-title-text {
  line-height: 60rpx;
}

.gui-fixed-top {
  position: fixed;
  z-index: 999;
  left: 0;
  top: 55rpx;
  width: 750rpx;
}

/* #ifdef  H5 */
.gui-fixed-top {
  top: 89rpx !important;
}

/* #endif */
/* #ifdef  MP */
.gui-fixed-top {
  top: 160rpx !important;
}

/* #endif */
/* #ifdef  APP-PLUS */
.gui-fixed-top {
  top: 160rpx !important;
}

/* #endif */
.bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-element {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.7) 25%,
    rgba(0, 0, 0, 0.6) 50%,
    rgba(0, 0, 0, 0.5) 70%,
    rgba(0, 0, 0, 0.4) 100%
  );
  /* 解释：linear-gradient表示创建线性渐变，to top指定渐变方向为从下往上，
        rgba(0, 0, 0, 0.8) 0%表示在起始位置（底部）颜色为透明度0.8的黑色，
        rgba(0, 0, 0, 0) 100%表示在结束位置（顶部）颜色为完全透明的黑色，实现透明度减弱效果 */
}

.bg-element1 {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.9) 25%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.9) 70%,
    rgba(255, 255, 255, 0.9) 100%
  );
  /* 解释：linear-gradient表示创建线性渐变，to top指定渐变方向为从下往上，
        rgba(0, 0, 0, 0.8) 0%表示在起始位置（底部）颜色为透明度0.8的黑色，
        rgba(0, 0, 0, 0) 100%表示在结束位置（顶部）颜色为完全透明的黑色，实现透明度减弱效果 */
}

.author-tag {
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 50rpx;
  padding: 0 30rpx;
  margin-right: 20rpx;
}
</style>
